<title>个人信息 - {:getSettingOptionsCache('base.web_site_title') ?: '后台管理系统模板'}</title>
<link rel="stylesheet" type="text/css" href="{:HTTP_STATIC_ADMIN_CDN_URL}css/style.min.css">

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <header class="card-header"><div class="card-title">账号信息</div></header>
                <div class="card-body user-select-none row justify-content-center">
                    <div class="col-md-5">
                        <div class="d-flex">
                            <img src="{$admin['avatar'] ? : (getSettingOptionsCache('base.web_site_logo') ?: HTTP_STATIC_CDN_URL . '/logo/logo.png')}" alt="..." class="avatar-xl rounded-circle me-3">
                            <div class="flex-grow-1">
                                <button class="btn btn-default">修改头像</button>
                                <p class="mt-1 mb-0">选择一张你喜欢的图片，裁剪后会自动生成264x264大小，上传图片大小不能超过2M。</p>
                            </div>
                        </div>
                        <hr>
                        <form id="example-from" class="site-form">
                            <input type="hidden" name="avatar" id="avatar" value="{$admin['avatar'] ? : (getSettingOptionsCache('base.web_site_logo') ?: HTTP_STATIC_CDN_URL . '/logo/logo.png')}" />
                            <div class="form-group mb-3">
                                <label class="form-label" for="username">用户名</label>
                                <input type="text" class="form-control" name="username" id="username" value="{$admin['name'] ? : ''}" disabled="disabled">
                            </div>
                            <div class="form-group mb-3">
                                <label class="form-label" for="nick">昵称</label>
                                <input type="text" class="form-control" name="nick" id="nick" placeholder="输入您的昵称" value="{$admin['nick'] ? : ''}">
                            </div>
                            <button type="submit" class="btn btn-primary">保存</button>
                            <button type="button" class="btn btn-default" onclick="javascript:history.back(-1);return false;">返 回</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/layer/src/layer.js"></script>
<!--加载动画插件-->
<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/lyear-loading.js"></script>
<!--表单验证-->
<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/jquery-validate/jquery.validate.min.js"></script>
<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/jquery-validate/messages_zh.min.js"></script>
<script>
    $(function (){
        let $exampleFrom = $('#example-from');
        $exampleFrom.submit(function(){
            event.preventDefault();
        });
        $exampleFrom.validate({
            ignore: ".ignore",    // 插件默认不验证隐藏元素,这里可以自定义一个不验证的class,即验证隐藏元素,不验证class为.ignore的元素
            focusInvalid: false,  // 禁用无效元素的聚焦
            rules: {
                'nick': {
                    required: true,
                },
            },
            errorPlacement: function errorPlacement(error, element) {
                var $parent = $(element).parents('.form-group');
                if ($parent.find('.invalid-feedback').length) {
                    return;
                }
                $(element).addClass('is-invalid');
                $parent.append(error.addClass('invalid-feedback'));
            },
            highlight: function(element) {
                var $el = $(element);
                if ($el.hasClass('js-tags-input')) {
                    $el.next('.tagsinput').addClass('is-invalid');  // tags插件所隐藏的输入框没法实时验证，比较尴尬
                }
            },
            unhighlight: function(element) {
                $(element).next('.tagsinput').removeClass('is-invalid');
                $(element).removeClass('is-invalid');
            },
            submitHandler: function(form) {
                let l = $('body').lyearloading({
                    opacity: 0.2,
                    spinnerSize: 'lg'
                });
                post("{:url('/admin/admin/account')}", $(form).serialize()).success(res => {
                    setTimeout(() => {
                        l.destroy();
                    }, 500)
                    res.code === 200 && setTimeout(() => {
                        top.location.reload();
                    }, 500)
                }).error();
            }
        });
    });
</script>